<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="closeHandle"
    class="dialog"
    :title="(checkedItem[0] ? checkedItem[0].nikeName : '') + '的积分明细'"
  >
    <el-row class="queryTime">
      <el-date-picker
        v-model="queryForm.startTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期"
      ></el-date-picker>
      <span style="padding: 0 10px;">至</span>
      <el-date-picker
        v-model="queryForm.endTime"
        type="datetime"
        @keyup="getDataList"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期"
      ></el-date-picker>
      <el-button @click="getDataList" style="margin-left: 10px;"
        >查询</el-button
      >
    </el-row>
    <el-table
      :data="dataList"
      :header-cell-style="{
        background: 'rgba(93,238,247,0.35)',
        color: '#555',
      }"
    >
      <!-- <el-table-column prop="integralDetailId" label="交易说明">
      </el-table-column> -->
      <el-table-column prop="createTime" label="交易时间"> </el-table-column>
      <el-table-column prop="integral" label="交易积分">
        <template slot-scope="scope">
          <span style="color: red;" v-if="scope.row.integral > 0"
            >+{{ scope.row.integral }}</span
          >
          <span style="color: red;" v-if="scope.row.integral <= 0">{{
            scope.row.integral
          }}</span>
          <span v-if="scope.row.detailName">{{ scope.row.detailName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gainIntegralType" label="交易说明">
        <template slot-scope="scope">
          <span>{{ integralTypeList[scope.row.gainIntegralType - 1] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, PropSync, Watch } from "vue-property-decorator";
import { getIntegralDetail } from "@/api/integral/integral";
import PageManage from "@/components/PageManage.vue";
import DateUtil from "@/store/modules/date";

@Component({
  components: {
    PageManage,
  },
})
export default class GiveCoupons extends Vue {
  @PropSync("visible", {
    type: Boolean,
    default: false,
  })
  dialogVisible: boolean;

  @Prop({
    type: Array,
    default: () => {
      return [];
    },
  })
  checkedItem;

  /** 分页条数 */
  pageSize = 10;

  /** 分页页码 */
  pageNum = 1;

  /** 数据长度 */
  total = 0;

  queryForm = {
    endTime: "",
    keyword: "",
    startTime: "",
    userId: "",
  };

  // 积分消费说明
  integralTypeList = [
    "兑换积分商品",
    "购买商品",
    "积分抵扣",
    "每日首次登录",
    "每日首次分享",
    "签到",
    "每日步数达标",
    "商家充值",
    "商家扣除",
    "积分清零",
    "归还积分",
    "兑换会员卡",
  ];

  dataList: any = [];

  @Watch("dialogVisible")
  handleVisibleChange(v) {
    if (v) {
      const now = new DateUtil();
      this.queryForm.userId = this.checkedItem[0].userId;
      this.queryForm.startTime = now.getAddDays(new Date(), -30) + " 00:00:00";
      this.queryForm.endTime = now.getAddDays(new Date(), 0) + " 23:59:59";
      this.getDataList();
    }
  }

  async getDataList() {
    const form = {
      size: this.pageSize,
      current: this.pageNum,
    };
    Object.assign(form, this.queryForm);
    const data = await getIntegralDetail(form);
    this.dataList = data.data.list;
    this.pageSize = data.data.size;
    this.pageNum = data.data.current;
    this.total = data.data.total;
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.getDataList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getDataList();
  }

  /**
   * 关闭弹窗
   */
  async closeHandle() {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        this.dialogVisible = false;
      }
    } catch (e) {
      console.log(e);
    }
  }

  async beforeCloseHandle(done) {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        done();
      }
    } catch (e) {
      console.log(e);
    }
  }

  /**
   * 关闭确认
   */
  async confirmHandle() {
    return await this.$confirm("确定退出积分明细页面？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
  }
}
</script>

<style scoped lang="scss">
.queryTime {
  float: right;
  margin-bottom: 25px;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
</style>
